<template>
  <div v-if="list.length" class="hall">
    <div
      v-for="item in list"
      :key="item.id"
      @click="linkAuctionDetail(item)"
      class="cursor-pointer"
    >
      <el-row class="justify-between items-center">
        <el-tooltip effect="dark" :content="item.sessionCode">
          <span class="text-base font-bold max-w-150px ellipsis">场次：{{ item.sessionCode }}</span>
        </el-tooltip>
        <span
          :class="{
            'bg-blue-500': item.status === 2,
            'bg-orange-300': item.status === 1,
            'bg-neutral-400': item.status === 4
          }"
          class="px-4 py-1 rounded-md text-light-50"
        >
          {{ getDictLabel(DICT_TYPE.BID_STATUS_TYPE, item.status?.toString()) }}
        </span>
      </el-row>
      <div class="text-base font-bold max-w-240px ellipsis my-14px">{{ item.sessionName }}</div>
      <el-row>
        <el-col :span="8"> 品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类： </el-col>
        <el-col :span="16">
          <el-tooltip effect="dark" :content="item.coalType">
            <span class="inline-block max-w-150px ellipsis">
              {{ item.coalType }}
            </span>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">交易方式：</el-col>
        <el-col class="text-red-700" :span="16">{{
          getDictLabel(DICT_TYPE.BID_TRADING_WAY, item.tradingWay?.toString())
        }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8">交易日期：</el-col>
        <el-col :span="16">{{ item.deliveryDate }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8">开始时间：</el-col>
        <el-col :span="16">{{ item.startTime }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8">结束时间：</el-col>
        <el-col :span="16">{{ item.endTime }}</el-col>
      </el-row>
      <el-row class="justify-center h-32px">
        <el-button
          v-if="item.status !== 4"
          :disabled="item.signUpStatus === 1"
          :type="item.signUpStatus === 1 ? 'success' : 'primary'"
          @click.stop="applicationFn(item)"
          v-hasPermi="['bid-client:sessionSlave:signUp']"
          >{{ getDictLabel(DICT_TYPE.BID_SIGN_UP_STATE, item.signUpStatus?.toString()) }}</el-button
        >
      </el-row>
      <el-row class="justify-center">
        <el-button link type="primary" @click.stop="viewNotice(item.announcementId)"
          >查看公告</el-button
        >
      </el-row>
    </div>
  </div>
  <el-empty v-if="!list.length" :image-size="200" class="mt-40" />
  <ApplicationModel ref="applicationModel" @success="success"></ApplicationModel>
</template>
<script lang="ts" setup>
import * as hall from '@/api/hall'
import * as Utils from '@/utils/dict'
import ApplicationModel from './applicationModel.vue'

const loading = ref(false)
const router = useRouter()
const applicationModel = ref()
const emit = defineEmits(['subPage'])
const list: Record<string, any> = ref([])
const { DICT_TYPE, getDictLabel } = reactive(Utils)

const getList = async () => {
  loading.value = true
  try {
    const data = await hall.getHallManage()
    list.value = data
  } finally {
    loading.value = false
  }
}

const applicationFn = (data) => {
  applicationModel.value.open(data)
}

const success = () => {
  getList()
}

const viewNotice = (id) => {
  emit('subPage', 1, id)
}

const linkAuctionDetail = (row) => {
  if (row.signUpStatus !== 1) {
    ElNotification({
      title: '提示',
      message: '已申请报名客户才有查看详情权限',
      type: 'warning'
    })
    return
  }
  router.push({ path: '/bidManage/bidsDetail', query: { id: row.id } })
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
.hall {
  display: grid;
  grid-template-columns: repeat(auto-fill, 280px);
  grid-column-gap: 50px;
  grid-row-gap: 40px;
  padding: 20px 40px;
  width: 100%;
  height: 100%;
  > div {
    width: 280px;
    height: 390px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
  }
}

.el-row + .el-row {
  margin-top: 14px;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
